from flask import Flask, render_template_string, jsonify
import time

app = Flask(__name__)

# 模拟实时坐标（替换为你的实际坐标获取逻辑）
current_lng = 121.473658  # 示例经度（百度坐标系）
current_lat = 31.230378  # 示例纬度（百度坐标系）


@app.route("/")
def show_map():
    """返回包含百度地图的HTML页面"""
    html_template = """
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>地图展示</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
        </style>
        <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=EzAgfFNdkPDSZxWfU8aoc516ZgcXj3MM"></script>
    </head>
    <body>
    
        <div id="container"></div>
    
    </body>
    </html>
    <script>
        lon=117.14648063708772;
        lat=39.06567016336429;
    var map = new BMapGL.Map('container'); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point( lon,lat), 20); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    
    // 创建点标记
    var marker1 = new BMapGL.Marker(new BMapGL.Point(lon, lat));
    // 在地图上添加点标记
    map.addOverlay(marker1);
    //左键单击显示经纬度
    map.addEventListener('click', function (e) {
        alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
    });
    
    // setInterval(updatePosition, 3000);
    // updatePosition();  // 首次加载
    //     lon=lon+0.01
    //     lat=lat+0.01
    </script>
    """ % {"lng": current_lng, "lat": current_lat}
    return render_template_string(html_template)


@app.route("/get_gps")
def get_gps():
    """返回当前坐标（JSON格式）"""
    # 替换为你的实际坐标获取逻辑（如从串口读取）
    global current_lng, current_lat
    return jsonify({"lng": current_lng, "lat": current_lat})


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8080)  # 允许局域网访问